<template>
  <div class="account">
    <!--空出padding-->
    <div class="content">
      <!--正文容器-->
      <el-card class="card">
        <!-- 统计表单 -->
        <el-table :data="totleTimes" style="width: 100%">
          <el-table-column label="项目" width="250" align="center" prop="projectName"></el-table-column>
          <el-table-column label="时间总和（小时）" align="center">
            <el-table-column label="自我申报" width="210" align="center" prop="totleHour1"></el-table-column>
            <el-table-column label="通过技术经理审核" width="210" align="center" prop="totleHour2"></el-table-column>
            <el-table-column label="通过受益人审核" width="210" align="center" prop="totleHour3"></el-table-column>
            <el-table-column label="用户名" width="210" align="center" prop="username"></el-table-column>
          </el-table-column>
        </el-table>
      </el-card>

      <el-pagination
        background
        layout="total, prev, pager, next"
        :page-size="5"
        :current-page="currentPage"
        :total="timeLength"
        @size-change="handleSizeChange()"
        @current-change="handleCurrentChange()"
      ></el-pagination>

    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //统计表格数据
        totleTimes: [
          {
            id: 0,
            projectName: "",
            state: "",
            totleHour1: "10",
            totleHour2: "10",
            totleHour3: "10",
            username: "",
          },
          {
            id: 0,
            projectName: "",
            state: "",
            totleHour1: "20",
            totleHour2: "20",
            totleHour3: "20",
            username: "",
          },
          {
            id: 0,
            projectName: "",
            state: "",
            totleHour1: "30",
            totleHour2: "30",
            totleHour3: "30",
            username: "",
          },
          {
            id: 0,
            projectName: "",
            state: "",
            totleHour1: "40",
            totleHour2: "40",
            totleHour3: "40",
            username: "",
          },
          {
            id: 0,
            projectName: "",
            state: "",
            totleHour1: "50",
            totleHour2: "50",
            totleHour3: "50",
            username: "",
          },
          {
            id: 0,
            projectName: "",
            state: "",
            totleHour1: "60",
            totleHour2: "60",
            totleHour3: "60",
            username: "",
          },
          {
            id: 0,
            projectName: "",
            state: "",
            totleHour1: "70",
            totleHour2: "70",
            totleHour3: "70",
            username: "",
          },
        ],

        workTimePage: {
          startWeek: "",
          endWeek: "",
          pageNum: 1,
          pageSize: 10,
        },
        // 分页
        currentPage: 1,
        pageSize: 5,
        timeLength: 0,
      };
    },
    created() {
      this.reloadTable();
    },
    methods: {
      async reloadTable() {

        this.timeLength = this.totleTimes.length;
        console.log(this.timeLength);
      },

      handleSizeChange(newSize) {
        // pagesize改变触发
        this.pageSize = newSize
      },
      handleCurrentChange(newPage) {
        // 页码改变触发
        this.currentPage = newPage
      }
    },
    mounted() {},
  };
</script>

